<template>
  <view class="container">
    <!-- 顶部圆环 -->
    <view class="circle-container">
      <view class="circle-outer"></view>
      <view class="circle-inner"></view>
    </view>
    
    <!-- 标题 -->
    <view class="title-container">
      <text class="title-cn">量子身份注册系统</text>
      <text class="title-en">QUANTUM IDENTITY REGISTRATION</text>
    </view>
    
    <!-- 注册表单 -->
    <view class="form-container">
      <view class="form-title">
        <text class="form-title-cn">系统注册</text>
        <text class="form-title-en">SYSTEM REGISTRATION</text>
      </view>
      
      <!-- 用户名 -->
      <view class="input-group">
        <text class="label-text">用户名 / USERNAME</text>
        <view class="input-wrapper">
          <text class="input-icon">👤</text>
          <input class="cyber-input" type="text" v-model="formData.username" placeholder="输入用户名" />
        </view>
      </view>
      
      <!-- 邮箱 -->
      <view class="input-group">
        <text class="label-text">邮箱 / EMAIL</text>
        <view class="input-wrapper">
          <text class="input-icon">✉️</text>
          <input class="cyber-input" type="email" v-model="formData.email" placeholder="输入邮箱" />
        </view>
      </view>
      
      <!-- 密码 -->
      <view class="input-group">
        <text class="label-text">密码 / PASSWORD</text>
        <view class="input-wrapper">
          <text class="input-icon">🔒</text>
          <input class="cyber-input" type="password" v-model="formData.password" placeholder="输入密码" />
        </view>
      </view>
      
      <!-- 确认密码 -->
      <view class="input-group">
        <text class="label-text">确认密码 / CONFIRM</text>
        <view class="input-wrapper">
          <text class="input-icon">🔒</text>
          <input class="cyber-input" type="password" v-model="formData.confirmPassword" placeholder="确认密码" />
        </view>
      </view>
      
      <!-- 验证码 -->
      <view class="input-group verification-group">
        <text class="label-text">验证码 / CODE</text>
        <view class="verification-wrapper">
          <view class="input-wrapper verification-input">
            <text class="input-icon">🔑</text>
            <input class="cyber-input" type="text" v-model="formData.verificationCode" placeholder="验证码" />
          </view>
          <button class="verification-btn" @click="sendVerificationCode">获取验证码</button>
        </view>
      </view>
      
      <!-- 同意条款 -->
      <view class="agreement-group">
        <checkbox :checked="formData.agreement" @click="formData.agreement = !formData.agreement" color="#ff00ff" />
        <text class="agreement-text">我已阅读并同意<text class="link-text" @click="showTerms">《用户协议》</text></text>
      </view>
      
      <!-- 注册按钮 -->
      <button class="register-btn" @click="register">注册系统</button>
      
      <!-- 登录链接 -->
      <view class="login-link">
        <text @click="goToLogin" class="link-text">已有账号？立即登录</text>
      </view>
    </view>
    
    <!-- 底部版本号 -->
    <view class="version-text">
      <text>CYBERSIGNAL DIAGNOSTICS v2.0.77</text>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

const formData = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  verificationCode: '',
  agreement: false
});

const register = () => {
  if (!formData.username) {
    uni.showToast({ title: '请输入用户名', icon: 'none' });
    return;
  }
  if (!formData.email) {
    uni.showToast({ title: '请输入邮箱', icon: 'none' });
    return;
  }
  if (!formData.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }
  if (formData.password !== formData.confirmPassword) {
    uni.showToast({ title: '两次密码不一致', icon: 'none' });
    return;
  }
  if (!formData.verificationCode) {
    uni.showToast({ title: '请输入验证码', icon: 'none' });
    return;
  }
  if (!formData.agreement) {
    uni.showToast({ title: '请同意用户协议', icon: 'none' });
    return;
  }
  
  // 这里添加注册逻辑
  uni.showLoading({ title: '注册中...' });
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({ title: '注册成功', icon: 'success' });
    // 注册成功后跳转到登录页
    setTimeout(() => {
      goToLogin();
    }, 1500);
  }, 2000);
};

const sendVerificationCode = () => {
  if (!formData.email) {
    uni.showToast({ title: '请先输入邮箱', icon: 'none' });
    return;
  }
  uni.showToast({ title: '验证码已发送', icon: 'success' });
};

const showTerms = () => {
  uni.showModal({
    title: '用户协议',
    content: '这是用户协议内容...',
    showCancel: false
  });
};

const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/Login/Login'
  });
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a20 0%, #1a1a3a 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 背景效果 */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
  z-index: 0;
}

/* 顶部圆环 */
.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.circle-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  border: 4px solid rgba(255, 0, 255, 0.7);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
  animation: pulse 2s infinite;
}

.circle-inner {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(0, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* 标题样式 */
.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  z-index: 1;
}

.title-cn {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
  margin-bottom: 5px;
}

.title-en {
  font-size: 16px;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
  letter-spacing: 1px;
}

/* 表单容器 */
.form-container {
  width: 100%;
  max-width: 400px;
  background: rgba(10, 10, 40, 0.6);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
  backdrop-filter: blur(5px);
  z-index: 1;
  border: 1px solid rgba(255, 0, 255, 0.3);
}

.form-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.form-title-cn {
  font-size: 22px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 5px;
}

.form-title-en {
  font-size: 14px;
  color: #00ffff;
  opacity: 0.8;
}

/* 输入框组 */
.input-group {
  margin-bottom: 15px;
}

.label-text {
  display: block;
  font-size: 14px;
  color: #00ffff;
  margin-bottom: 5px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 0, 255, 0.5);
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
}

.input-wrapper:focus-within {
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.input-icon {
  padding: 0 10px;
  font-size: 18px;
}

.cyber-input {
  flex: 1;
  height: 45px;
  background: transparent;
  border: none;
  color: #fff;
  padding: 0 10px;
  font-size: 16px;
}

/* 验证码样式 */
.verification-group {
  margin-bottom: 20px;
}

.verification-wrapper {
  display: flex;
  gap: 10px;
}

.verification-input {
  flex: 1;
}

.verification-btn {
  width: 120px;
  height: 45px;
  background: linear-gradient(135deg, #ff00ff 0%, #9900ff 100%);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 协议样式 */
.agreement-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.agreement-text {
  font-size: 14px;
  color: #fff;
  margin-left: 5px;
}

.link-text {
  color: #ff00ff;
  text-decoration: underline;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #ff00ff 0%, #9900ff 100%);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.register-btn::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(135deg, #ff00ff 0%, #9900ff 100%);
  z-index: -1;
  filter: blur(10px);
  opacity: 0.7;
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 10px;
}

/* 底部版本号 */
.version-text {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: rgba(255, 0, 255, 0.7);
  letter-spacing: 1px;
}
</style>